<template>
    <div id="product">
          <fieldset>
              <legend>{{name}}</legend>
              <div id="list">
                    <ol>
                        <li v-for="item of products" :key="item.id">
                            <div>{{item.title}}</div>
                            <div>{{item.price}}</div>
                            <div>{{item.inventory}}</div>
                            <div>{{item.id}}</div>
                            <div> <button @click="handleCarts(item)">添加</button></div>
                        </li>
                    </ol>
              </div>
              <button @click="getProduct">点击获取购物车数据</button>
             
        </fieldset>
          <el-car></el-car>
    </div>
</template>

<script>
import car from "../car/car.vue"
import { mapActions , mapState} from "vuex";
export default {
    components:{
        "el-car":car
    },
    methods:{
        ...mapActions("product",["GETDATA"]),
        ...mapActions("car",["ADD_TO_CART"]),
        getProduct(){
             fetch("http://chst.vip/data/index.json").then(res => res.json()).then(res =>  this.GETDATA(res.data))
        },
        handleCarts(t){
             this.ADD_TO_CART(t);
        }
    },
    computed:{
        ...mapState("product",["products"]),
        ...mapState(["name"])
    },
    mounted(){
        
    }
}
</script>

<style>

</style>